<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator';
import {deleteCustoms, getCustomInfo, updateCustom, updateCustomerStatus} from "@/api/service";


export interface Info {
  customerName:string,
  phone:string,
  name:string,
  sex:string,
  idNumber:string,
  status?:number,
  updateTime?:string,
  id?:number
}
@Component({
  name:'service',
  methods: {deleteCustoms, updateCustom}
})
export default class index extends Vue {
  private currentPage = 1
  private pageSizes = [3,5,7,9,11]
  private pageSize = 7
  private total:number = 0
  private status:number = null
  private customerName = ''
  private customList = []
  private dialogVisible = false
  private isAdd = false
  private selectedCustomers = []
  private updateInfo:Info = {
    customerName:'',
    phone:'',
    name:'',
    sex:'',
    idNumber:'',
  }

  @Watch('customerName')
  onChangeValue(newVal:string, oldVal:string) {
    if(newVal==='') {
      this.getCustomInfo()
    }
  }

  created(){
    this.getCustomInfo()
  }

  async getCustomInfo(pager=1){
    this.currentPage = pager
    const {data} = await getCustomInfo(this.customerName, this.currentPage, this.pageSize, this.status)
    console.log("data", data)
    if(data.code===1) {
      this.customList = data.data.records
      this.total = data.data.total
    }
  }

  handleSizeChange(newSize){
    this.pageSize = newSize
    this.getCustomInfo()
  }

  handleCurrentChange(newPage){
    this.currentPage = newPage
    this.getCustomInfo(this.currentPage)
  }

  handleSelectionChange(customers:[]){
    if (customers.length!==0) {
      this.selectedCustomers = []
      customers.forEach((item:Info)=>{
        this.selectedCustomers.push(item.id)
      })
    }else {
      this.selectedCustomers = []
    }
  }

  async deleteOneCustom(row) {
    this.selectedCustomers = []
    this.selectedCustomers.push(row.id)
    const {data} = await deleteCustoms(this.selectedCustomers)
    if(data.code===1) {
      this.$message.success({
        message:'删除成功',
        type:'success'
      })
      await this.getCustomInfo(this.currentPage)
    }else {
      this.$message.error({
        message:'删除失败',
        type:'error'
      })
    }
  }

  async deleteCustom(){
    const {data} = await deleteCustoms(this.selectedCustomers)
    if(data.code===1) {
      this.$message.success({
        message:'删除成功',
        type:'success'
      })
      await this.getCustomInfo(this.currentPage)
    }else {
      this.$message.error({
        message:'删除失败',
        type:'error'
      })
    }
  }

  update(row){
    this.isAdd = false
    this.editInfo(row)
  }

  add() {
    this.isAdd = true
    this.editInfo({})
  }

  editInfo(row){
    this.dialogVisible = true
    if(!this.isAdd) {
      this.updateInfo = Object.assign({}, row)
      delete this.updateInfo.status
      delete this.updateInfo.updateTime
    }else {
      this.updateInfo = Object.assign({}, {
        customerName:'',
        phone:'',
        name:'',
        sex:'',
        idNumber:'',
      })
    }
  }

  async validateInfo(){
    if(Object.values(this.updateInfo).some(values=>values===null||values===undefined||values==='')) {
      this.$message.error({
        message:'信息填写不完整',
        type:'error'
      })
      return
    }else {
      const {data} = await updateCustom(this.updateInfo)
      if(data.code===1) {
        this.$message.success({
          message:'修改成功',
          type:'success'
        })
        this.dialogVisible = false
        await this.getCustomInfo()
      }else {
        this.$message.error({
          message:'修改失败',
          type:'error'
        })
      }
    }
  }

  closeDialog(){
    this.dialogVisible = false
  }

  async updateStatus(row) {
    const {data} = await updateCustomerStatus(row)
    if(data.code===1) {
      this.$message.success({
        message:'状态修改成功'
      })
    }else {
      this.$message.error({
        message:'状态修改失败',
        type:'error'
      })
    }
  }
}
</script>

<template>
  <el-card class="card">
    <el-form :inline="true">
      <el-form-item label="客服名称:" style="margin-right: 50px">
        <el-input v-model="customerName" style="width: 240px" placeholder="请填写客服名称"></el-input>
      </el-form-item>
      <el-form-item label="客服状态:" style="margin-right: 40px">
        <el-select v-model="status" placeholder="请选择">
          <el-option :value="null" label="无"></el-option>
          <el-option :value="1" label="启用"></el-option>
          <el-option :value="0" label="禁用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getCustomInfo()" type="primary">查询</el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button @click="add()" type="info" icon="el-icon-add">添加客服</el-button>
      </el-form-item>
      <el-form-item style="float: right;margin-right: 30px">
        <el-button :disabled="!selectedCustomers.length" @click="deleteCustom" type="danger" icon="el-icon-delete">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="customList" border @selection-change="handleSelectionChange">
      <el-table-column width="70px" type="selection"></el-table-column>
      <el-table-column prop="customerName" label="客服名称"></el-table-column>
      <el-table-column align="center" prop="name" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column align="center" prop="sex" label="性别"></el-table-column>
      <el-table-column align="center" label="状态">
        <template v-slot="{row}">
          <span>{{row.status?'启用':'禁用'}}</span>
          <el-switch
           style="display: block"
           v-model="row.status"
           active-color="#13ce66"
           inactive-color="#ff4949"
           :inactive-value="0"
           :active-value="1"
           @change="updateStatus(row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column width="200px" prop="updateTime" label="最后操作时间"></el-table-column>
      <el-table-column align="center" width="150px" label="操作">
        <template v-slot="{row}">
          <el-button @click="update(row)" circle type="primary" size="small" icon="el-icon-edit"></el-button>
          <el-button @click="deleteOneCustom(row)" circle type="danger" size="small" icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, sizes, prev, pager, next, jumper"
                   background
                   hide-on-single-page
                   :current-page="currentPage"
                   :page-sizes="pageSizes"
                   :page-size="pageSize"
                   class="customerList"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :total="total"
    ></el-pagination>
    <el-dialog :visible="dialogVisible" :before-close="closeDialog">
      <template v-slot:title>
        <h2>{{isAdd?'添加':'修改'}}客服信息</h2>
      </template>
      <template v-slot:default>
        <el-form style="margin-left: 25%" label-width="left">
          <el-form-item label="客服姓名:">
            <el-input style="width: 300px" v-model="updateInfo.name" placeholder="请输入客服姓名"></el-input>
          </el-form-item>
          <el-form-item label="客服用户名:">
            <el-input style="width: 300px" v-model="updateInfo.customerName" placeholder="请输入客服用户名"></el-input>
          </el-form-item>
          <el-form-item label="手机号:">
            <el-input style="width: 300px" v-model="updateInfo.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="性别:">
            <el-select v-model="updateInfo.sex">
              <el-option label="无" :value="null"></el-option>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号:">
            <el-input style="width: 300px" placeholder="请输入身份证号" v-model="updateInfo.idNumber"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template v-slot:footer>
        <el-button @click="()=>dialogVisible=!dialogVisible">取消</el-button>
        <el-button @click="validateInfo()" type="primary" style="margin-right: 45%">确定</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<style scoped lang="scss">
.card {
  margin: 30px 30px;
}
.el-switch {
  height: 25px;
}
.stop,
.start {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}
.start {
  background-color: #7ec636;
}
.stop {
  background-color: #ff0000;
}
.customerList {
  text-align: center;
  margin-top: 20px;
}
</style>
